<template>
    <div class="yuan-container demand-container">
        <a-spin tip="Loading..." :spinning="loading">
            <a-card title="我的需求">
                <a-tabs type="card" :default-active-key="pageType" @change="tabChange">
                    <a-tab-pane v-for="item in typeArr" :key="item.val" :tab="item.title"></a-tab-pane>
                </a-tabs>

                <div class="filter-panel">
                    <div class="filter-list">
                        <span>需求名称：</span>
                        <a-input-search allowClear v-model="pageParams.demandName" placeholder="请输入需求名称" @search="resetList" />
                    </div>
                    <div class="filter-list">
                        <span>创建时间：</span>
                        <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']"
                            :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                    </div>
                    <div class="filter-list">
                        <span>分类：</span>
                        <a-select v-model="pageParams.category" @change="resetList" allowClear placeholder="请选择分类">
                            <a-select-option value="生产研发需求">生产研发需求</a-select-option>
                            <a-select-option value="技术服务需求">技术服务需求</a-select-option>
                            <a-select-option value="临床效果需求">临床效果需求</a-select-option>
                            <a-select-option value="生产技术需求">生产技术需求</a-select-option>
                            <a-select-option value="其他">其他需求</a-select-option>
                        </a-select>
                    </div>
                    <div class="filter-list">
                        <span>细分领域：</span>
                        <a-select v-model="pageParams.subCategoryStr" @change="resetList" allowClear placeholder="请选择细分领域">
                            <a-select-option v-for="item in territoryList" :value="item.content" :key="item.id">{{item.content}}</a-select-option>
                        </a-select>
                    </div>

                    <a-button style="float:right" type="primary" class="filter-list" @click="add">新增需求</a-button>

                </div>
                <div class="table" v-if="pageList.length>0">
                    <div class="page-list" v-for="item in pageList">
                        <div class="list-imgbox">
                            <img class="list-img" :src="item.coverImageUrl" />
                        </div>

                        <div class="list-mid">
                            <div class="list-title">{{item.demandName}}</div>
                            <div class="list-type">{{item.subCategory.join(',')}}</div>
                            <div class="proline-parent">
                                <div class="proline-box line-box">
                                    <div class="proline-list proline-line"
                                        :class="item.auditState===0 && item.state===null?'proline-on':'proline-over'"></div>

                                    <template v-for="(sch,idx) in schList">
                                        <div class="proline-list proline-line" :class="getProlineClass(sch,item)"></div>
                                    </template>

                                </div>
                                <div class="proline-box">
                                    <div class="proline-list proline-words"
                                        :class="item.auditState===0&& item.state===null?'proline-words-on':'proline-words-over'">
                                        {{item.auditState===0?'待提交':'已提交'}}
                                    </div>

                                    <template v-for="(sch,idx) in schList">
                                        <div class="proline-list proline-words" :class="getProlineWordsClass(sch,item)">
                                            {{sch.title}}{{getProlineTimeOut(sch,item)}}</div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="list-tips" style="max-width:200px;">
                            <span class="c-warning" v-if="item.state===0">等待资料审核</span>
                            <span class="c-danger" v-if="item.state===1">资料审核失败：{{item.rejectCause}}</span>
                        </div>
                        <div class="list-btnbox">
                            <template v-if="item.auditState===0">
                                <a-button type="primarynull" class="list-btn" @click="clickEdit(item)">修改</a-button>
                                <a-popconfirm okText="确定" cancelText="取消" title="是否提交审核" @confirm="clickSubAudit(item)">
                                    <a-button type="primary" class="list-btn">提交审核</a-button>
                                </a-popconfirm>
                                <a-popconfirm okText="确定" cancelText="取消" title="是否删除该需求" @confirm="clickDelete(item)">
                                    <a-button type="dangernull" class="list-btn">删除</a-button>
                                </a-popconfirm>
                            </template>

                            <template v-else>

                                <template v-if="item.state===2">
                                    <a-button type="primary" class="list-btn" @click="clickBroker(item)">编辑技术经纪人</a-button>
                                    <a-button type="primary" class="list-btn" @click="clickRec(item)">智能推荐</a-button>
                                    <a-popconfirm okText="确定" cancelText="取消" title="是否取消发布" @confirm="clickCancel(item)">
                                        <a-button type="dangernull" class="list-btn">取消发布</a-button>
                                    </a-popconfirm>
                                </template>

                            </template>
                            <a-button type="primarynull" class="list-btn" @click="clickShow(item)">查看</a-button>
                        </div>

                    </div>
                    <div style="text-align:right">
                        <a-pagination v-model="pagination.pageNum" :pageSize="pagination.pageSize" :total="pagination.total"
                            show-less-items />
                    </div>
                </div>
                <div class="page-content" v-else>
                    <div class="list-null">
                        <div class="iconfont">&#xe642;</div>
                        <div>暂无数据</div>
                    </div>

                </div>
            </a-card>
        </a-spin>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" @resetList="resetList" :editId="editId"
            :isShow="isShow" />
        <RecommendVue :visible="recommendVisible" @closeModal="() => recommendVisible = false" :recId="recId"
            @resetList="resetList" />

        <UserVue :visible="userVisible" @closeModal="() => userVisible = false" @sureClose="selectUser" />
        <a-modal width="600px" title="修改技术经纪人" :visible="brokerVisible" @ok="brokerOk" @cancel="brokerCancel" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="brokerLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item class="yuan-form-row" label="授权经纪人">
                            <div style="display:inline-block;width:55%;border-bottom: solid 1px #eee;"
                                v-for="(item,idx) in detailInfo.brokerRelevances">
                                <span style="display:inline-block;width:150px;">{{item.technicalRepresentative}}</span>
                                <a-button type="danger" @click="delUser(item,idx)">移除</a-button>
                            </div>
                            <div></div>
                            <a-button type="primary" @click="()=>userVisible=true">选择技术经纪人</a-button>
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./detail.vue";
import RecommendVue from "./recommend.vue";
import UserVue from "@/components/addUserModal.vue";
@Component({
    name: "tpl",
    components: { DetailVue, RecommendVue, UserVue },
})
export default class extends Vue {
    schList = [
        { title: "资料审核", val: 0 },
        { title: "征集中", val: 2 },
    ];
    typeArr = [
        { title: "全部需求", val: "" },
        { title: "征集中需求", val: "2" },
    ];
    pageParams:any = {
        date:[]
    };
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [];

    async mounted() {
        await this.getTerritoryList()
        this.getList();
    }
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getDemandList({
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
                state: this.pageType,
                ...this.pageParams
            });
            this.pageList = res.data?.rows ||[];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    pageType = "";
    tabChange(e: string) {
        const find = this.typeArr.find((item) => {
            return item.val === e;
        });
        this.pageType = e;

        this.resetList();
    }
    detailVisible = false;
    add() {
        this.isShow = false;
        this.editId = "";
        this.detailVisible = true;
    }
    editId = "";
    isShow = false;
    clickEdit(item) {
        this.isShow = false;
        this.editId = item.id;
        this.detailVisible = true;
    }
    async clickSubAudit(item) {
        this.loading = true;
        try {
            const res = await api.subAuditDemand({
                id: item.id,
            });
            this.$message.success("提交成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    clickShow(item) {
        this.isShow = true;
        this.editId = item.id;
        this.detailVisible = true;
    }
    async clickDelete(item) {
        this.loading = true;
        try {
            await api.deleteDemand(item.id);
            this.$message.success("删除成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    async clickCancel(item) {
        this.loading = true;
        try {
            await api.cancelDemand(item.id);
            this.$message.success("取消成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }

    recommendVisible = false;
    recId = "";
    clickRec(item) {
        this.recId = item.id;
        this.recommendVisible = true;
    }

    getProlineClass(sch, item) {
        if (item.state === 1 && sch.val === 0) {
            return "proline-timeout";
        } else if (item.state > sch.val) {
            return "proline-over";
        } else if (item.state === sch.val) {
            return "proline-on";
        } else if (item.state < sch.val || item.state === null) {
            return "proline-after";
        }
    }
    getProlineWordsClass(sch, item) {
        if (item.state === 1 && sch.val === 0) {
            return "proline-words-timeout";
        } else if (item.state > sch.val) {
            return "proline-words-over";
        } else if (item.state === sch.val) {
            return "proline-words-on";
        } else if (item.state < sch.val || item.state === null) {
            return "proline-words-after";
        }
    }
    getProlineTimeOut(sch, item) {
        if (sch.val === 0 && item.state === 1) {
            return "(失败)";
        }
        return "";
    }

    brokerVisible = false;
    brokerLoading = false;
    detailInfo: any = {};
    async clickBroker(item) {
        await this.getDetailInfo(item.id);
        this.brokerVisible = true;
    }
    async brokerOk(item) {
        const res = await api.addDemand(this.detailInfo);
        this.$message.success("保存成功");
        this.brokerVisible = false;
    }
    brokerCancel() {
        this.brokerVisible = false;
    }
    userVisible = false;
    selectUser(userInfo) {
        if (this.detailInfo.brokerRelevances) {
            this.detailInfo.brokerRelevances.push({
                technicalRepresentative: userInfo.name,
                technicalHeadPortrait: userInfo.headPortrait,
                technicalPhone: userInfo.phone,
                addType: "ZJ",
            });
        } else {
            this.detailInfo.brokerRelevances = [
                {
                    technicalRepresentative: userInfo.name,
                    technicalHeadPortrait: userInfo.headPortrait,
                    technicalPhone: userInfo.phone,
                    addType: "ZJ",
                },
            ];
        }
    }
    delUser(item, idx) {
        if (item.addType === "PT") {
            this.$message.error("不能移除平台添加的经纪人");
            return;
        }
        this.detailInfo.brokerRelevances.splice(idx, 1);
    }
    async getDetailInfo(id) {
        this.brokerLoading = true;
        try {
            const res = await api.getDemandList({ id: id });
            res.data.introImageUrl = res.data.introImageUrl ? JSON.parse(res.data.introImageUrl) : [];
            res.data.demandType = res.data.differentiateDemand || "本人需求";
            res.data.placeAreaCode = res.data.code ? res.data.code.split(",") : [];
            this.detailInfo = res.data;
        } finally {
            this.brokerLoading = false;
        }
    }

    territoryList = [];
    async getTerritoryList() {
        this.loading = true;
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            this.loading = false
        }
    }

    dateChange(e: any[]) {
        const arr=e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.beginTime=arr[0]
        this.pageParams.endTime=arr[1]
        this.resetList()
    }
}
</script>
<style scoped lang="scss">
.demand-container {
    .page-list {
        display: flex;
        background-color: #f7f7f7;
        padding: 10px;
        align-items: center;
        margin-bottom: 20px;
        border-radius: 4px;
    }
    .list-imgbox {
        width: 230px;
        height: 150px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }
    .list-img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 4px;
    }
    .list-mid {
        flex-grow: 1;
        padding: 0 15px;
    }
    .list-title {
        font-weight: bold;
        font-size: 18px;
        color: #102040;
    }
    .list-type {
        font-size: 16px;
        color: #333333;
        margin-top: 5px;
    }
    .proline-parent {
        padding: 5px 0;
        text-align: left;
        line-height: 16px;
    }
    .proline-box {
        display: flex;
        margin-top: 20px;
    }
    .line-box {
        margin-bottom: 5px;
        transform: translateX(5px);
        display: flex;
    }
    .proline-list {
        display: inline-block;
        width: 100px;
        flex-shrink: 0;
        color: #82848a;
    }
    .proline-line {
        height: 2px;
        background-color: #f9f9f9;
    }
    .proline-line:last-child {
        width: 10px;
        background-color: transparent;
    }
    .proline-line::before {
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 10px;
        background-color: #fff;
        vertical-align: top;
        position: relative;
        top: -4px;
    }
    .proline-timeout {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-timeout::before {
        background-color: #fe3d3d;
    }

    .proline-over {
        background-color: rgba(27, 196, 109, 1);
    }
    .proline-over::before {
        background-color: #1bc46d;
    }
    .proline-after {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-after::before {
        //background-color: #82848A;
        border: solid 1px #82848a;
    }
    .proline-on {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-on::before {
        background-color: #1bc46d;
    }

    .proline-words {
        padding: 0 2px;
    }
    .proline-words-over {
        color: #333;
    }
    .proline-words-on {
        color: #333;
    }
    .proline-words-after {
        opacity: 0.5;
    }
    .proline-words-timeout {
        color: #fe3d3d;
    }

    .list-btnbox {
        display: flex;
        flex-wrap: wrap;
        width: 270px;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .list-btn {
        margin-bottom: 5px;
        margin-right: 5px;
    }
    .long-btn {
        width: 100px;
    }
}
</style>
